<template>
  <div class="about">
    <van-overlay :show="showLoading">
      <van-loading color="#fff" size="100px" type="spinner" />
    </van-overlay>
    <div class="head-line">
      <img src="@/assets/icon/arrow-l.png" @click="logout" alt />
      <h2>陆家镇农村房屋规划建设平台</h2>
      <!-- <img src="@/assets/icon/edit.png" @click="showForm" alt /> -->
      <span></span>
    </div>
    <div class="main-content">
      <div class="user-info">
        <p>
          <span>您好：</span>
          <span>{{ obj.fullname }}</span>
        </p>
      </div>
      <div class="search">
        <label>户主姓名: </label>
        <span>
          <input type="text" v-model="value" />
        </span>
        <div @click="search">搜索</div>
        <div @click="resetSearch">清除</div>
      </div>
      <div class="houseList">
        <div class="title-line">
          <span v-for="item in titleList" :key="item">{{ item }}</span>
        </div>
        <div class="house-item" v-for="obj in houseList" :key="obj.id">
          <span>{{ obj.village }}</span>
          <span>{{ obj.address }}</span>
          <span>{{ obj.doorno }}</span>
          <span>{{ obj.name }}</span>
          <span @click="getMore(obj.id)">查看</span>
        </div>
        <van-pagination
          v-model="page.pageNow"
          :total-items="page.total"
          :page-count="page.totalPage"
          :item-oer-page="page.pageSize"
          :show-page-size="3"
          @change="getHouseList"
          force-ellipses
        />
      </div>
      <!-- <div class="question">
        <p>
          使用时如有疑问请联系
          <br />
          <a href="tel:17312592293">17312592293</a>
          (工作时间：正常工作日08:30-16:30)
        </p>
      </div> -->
    </div>
  </div>
</template>

<script>
import api from "@/api/api.js";
import local from "@/util/localstorage.js";
export default {
  data() {
    return {
      showLoading: true,
      titleList: ["社区", "村组", "门牌", "户主", "操作"],
      houseList: [],
      page: {
        pageNow: 1,
        // total: 1,
        pageSize: 2,
      },
      value: "",
    };
  },
  watch: {},
  computed: {
    obj() {
      return local.getLoaclStorage("userInfo");
    },
  },
  methods: {
    getHouseList() {
      // 尾缀 p 当前页码     尾缀 z和oz 分页大小
      api
        .getHouseList({
          "d-1576434-p": this.page.pageNow,
          "d-1576434-z": 10,
          "d-1576434-oz": 10,
        })
        .then((res) => {
          console.log(res.data.jsonData);
          this.showLoading = false;
          this.houseList = res.data.jsonData.list;
          // this.page.total = res.data.jsonData.total;
          this.page.totalPage =
            res.data.jsonData.total / res.data.jsonData.pageSize;
        });
    },
    getMore(id) {
      this.$router.push("/house/" + id);
    },
    search() {
      api
        .getHouseList({
          Q_name_SL: this.value,
        })
        .then((res) => {
          console.log(res.data.jsonData);
          this.houseList = res.data.jsonData.list;
          this.page.totalPage =
            res.data.jsonData.total / res.data.jsonData.pageSize;
        });
    },
    resetSearch() {
      this.value = "";
      this.getHouseList();
    },
    // 格式化时间戳     自定义返回  年月日时分秒
    formatDate(date) {
      var now = new Date(date);
      var year = now.getFullYear();
      // var year = now.getYear();     //  为啥是120
      // console.log(year);
      var month = now.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = now.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      return month + "-" + date;
    },
    // 退出登录
    logout() {
      console.log("退出登录");
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "是否退出登录",
        })
        .then(() => {
          // on confirm
          api.logout().then((res) => {
            console.log(res);
            if (res.data.success) {
              this.$router.replace("/");
            }
          });
        })
        .catch(() => {});
    },
  },
  mounted() {},
  created() {
    // 控制背景色
    var bg = document.querySelector("body");
    bg.style.backgroundColor = "#f2f2f2";

    this.getHouseList();
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.about {
  // position: relative;
  // width: 100%;
  background-color: #f2f2f2;
  font-size: 14px;
  .van-loading {
    margin-top: 80%;
  }
  .head-line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 42px;
    color: white;
    background-color: #109beb;
    h2 {
      padding: 0;
      font-size: 20px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
    }
    img {
      width: 20px;
      height: 20px;
    }
    span {
      display: inline-block;
      height: 30px;
      width: 40px;
      line-height: 30px;
    }
  }
  .main-content {
    padding: 0 16px 16px;
    box-sizing: border-box;
    background-color: #f2f2f2;
    .user-info {
      // margin-bottom: 16px;
      padding: 10px 30px;
      width: 100%;
      // height: 187px;
      border-radius: 20px;
      font-size: 20px;
      font-weight: bold;
      box-sizing: border-box;
      // background-color: #fff;
      p {
        width: 100%;
        text-align: left;
      }
    }
    .search {
      margin: 5px 0;
      span {
        display: inline-block;
        vertical-align: top;
        border: 1px solid rgb(190, 190, 190);
        input {
          border: none;
          height: 20px;
          line-height: 20px;
        }
      }
      > div {
        display: inline-block;
        padding: 0 3px;
        margin-left: 5px;
        height: 20px;
        line-height: 20px;
        border: 1px solid rgb(190, 190, 190);
      }
    }
    .houseList {
      width: 100%;
      background-color: #e5e5e5;
      .title-line {
        width: 100%;
        span {
          display: inline-block;
          width: 20%;
          height: 25px;
          line-height: 25px;
        }
      }
      .house-item {
        background-color: #fff;
        span {
          display: inline-block;
          vertical-align: middle;
          width: 20%;
          margin-top: 10px;
          line-height: 20px;
          &:last-child {
            color: rgb(84, 159, 230);
          }
        }
      }
    }
    .question {
      margin-top: 10px;
      line-height: 20px;
    }
  }
}
</style>